<template>
 <div>
     <router-link tag="div" to="/" class="header-abs" v-show="shouAbs">
         <div class="iconfont header-abs-back">&#xe780;</div>
    </router-link>
     <div 
     class="header-fixed"
      v-show="!shouAbs"
      :style="opcityStyle"
      >
         景点闲情<div class="iconfont header-fixed-back">&#xe780;</div>

     </div>
 </div>
</template>

<script>
 export default {
   data () {
     return {
            shouAbs : true,
            opcityStyle:{
                opacity:0
            }
     }
   },
   methods :{
       handleScroll (){
           const top = document.documentElement.scrollTop
           if(top>53){
               let opacity = top / 140
               opacity = opacity >1 ?1 :opacity
               this.opcityStyle={
                   opacity
               }
               this.shouAbs=false
           }else{
                this.shouAbs=true

           }
       }
   },
   mounted () {
       window.addEventListener('scroll',this.handleScroll)
   },
   //  每次页面 即将被替换成别的页面的时候执行
   destoryed () {
       window.removeEventListener('scroll',this.handleScroll)
   },
   watch :{

   },
   components: {

   }
 }
</script>
<style lang="stylus" scoped>
    .header-abs{
        position absolute
        left 11PX
        top 11PX
        width 44PX
        height 44PX
        line-height 44px
        text-align center
        border-radius 10px
        background rgba(0,0,0,.8)
    }
    .header-abs-back{
        color #ffffff
        font-size 18px
    }
    .header-fixed{
        overflow hidden
        position fixed
        height 36px
        top 0
        left 0
        right 0
        left 0
        line-height 36px
        color #ffffff
        text-align center
        background #00b5ff
    }
    .header-fixed-back{
        width:22px;
        position:absolute;
        top:0px;
        left:2px;
        text-align:center;
        color #fff
        font-size:22px;
    }
</style>

